<template>
    <div class="Preson">
    <ul>
        <li v-for="item in list" :key="item.id">
            {{ item.id }}--{{ item.name }}--{{ item.age }}
        </li>
    </ul>
    </div>
</template>

<script lang="ts" setup>
import type { PersonList } from '@/types';
import { withDefaults } from 'vue'
// defineProps可以不引入 它属于【宏函数】

// 只接收list
// defineProps(['list'])

//接收list + 限制类型
// defineProps<{list:PersonList[]}>()

// 接收list + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{list?: PersonList[]}> (), {
    list:()=>[{id:'3131',name:'你哈',age:22}]
})

</script>

<style scoped>
.Preson {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button { 
    margin: 0 10px;
}
</style>